<template>
  <el-dialog
    v-model="dialogVisible"
    title="登录已过期"
    width="400px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    center
    @closed="handleClosed"
  >
    <div class="token-expired-content">
      <div class="icon-wrapper">
        <el-icon size="48" color="#f56c6c">
          <Warning />
        </el-icon>
      </div>
      <div class="message">
        <p class="main-message">您的登录状态已过期</p>
        <p class="sub-message">请重新登录以继续操作，您当前的内容将被保留</p>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleLater">稍后登录</el-button>
        <el-button type="primary" :loading="loginLoading" @click="handleLogin">
          立即重新登录
        </el-button>
      </div>
    </template>

    <!-- 登录表单弹窗 -->
    <LoginDialog
      v-if="showLoginForm"
      v-model="showLoginForm"
      :redirect="false"
      @login-success="handleLoginSuccess"
      @login-cancel="handleLoginCancel"
    />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { ElNotification } from 'element-plus';
import { Warning } from '@element-plus/icons-vue';
import LoginDialog from '@/views/login/components/LoginDialog.vue';
import { useUserStore } from '@/store/modules/user';
import { useCommonStore } from '@/store/modules/common';
import { usePermissionStore } from '@/store/modules/permission';

interface Props {
  modelValue: boolean;
  message?: string;
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void;
  (e: 'login-success'): void;
  (e: 'login-cancel'): void;
  (e: 'later'): void;
}

const props = withDefaults(defineProps<Props>(), {
  message: '您的登录状态已过期，请重新登录以继续操作'
});

const emit = defineEmits<Emits>();

const userStore = useUserStore();
const commonStore = useCommonStore();
const permissionStore = usePermissionStore();

const loginLoading = ref(false);
const showLoginForm = ref(false);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
});

// 监听弹窗显示状态
watch(dialogVisible, (visible) => {
  if (visible) {
    // 弹窗显示时的处理
    console.log('Token过期弹窗显示');
  }
});

/**
 * 处理稍后登录
 */
const handleLater = () => {
  ElNotification({
    title: '提醒',
    message: '请记得尽快重新登录，否则可能无法保存您的操作',
    type: 'warning',
    duration: 5000
  });
  emit('later');
  dialogVisible.value = false;
};

/**
 * 处理立即登录
 */
const handleLogin = () => {
  showLoginForm.value = true;
};

/**
 * 处理登录成功
 */
const handleLoginSuccess = async () => {
  try {
    loginLoading.value = true;

    // 重新获取用户权限和数据
    await commonStore.getDictionary();
    await permissionStore.generateRoutes(userStore.roles);

    ElNotification({
      title: '登录成功',
      message: '您已重新登录，可以继续操作',
      type: 'success',
      duration: 3000
    });

    emit('login-success');
    showLoginForm.value = false;
    dialogVisible.value = false;
  } catch (error) {
    console.error('获取用户数据失败:', error);
    ElNotification({
      title: '错误',
      message: '登录成功但获取用户数据失败，请刷新页面重试',
      type: 'error',
      duration: 5000
    });
  } finally {
    loginLoading.value = false;
  }
};

/**
 * 处理登录取消
 */
const handleLoginCancel = () => {
  showLoginForm.value = false;
  emit('login-cancel');
};

/**
 * 处理弹窗关闭
 */
const handleClosed = () => {
  // 重置状态
  showLoginForm.value = false;
  loginLoading.value = false;
};
</script>

<style lang="scss" scoped>
.token-expired-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;

  .icon-wrapper {
    margin-bottom: 16px;
  }

  .message {
    text-align: center;

    .main-message {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin: 0 0 8px 0;
    }

    .sub-message {
      font-size: 14px;
      color: #606266;
      margin: 0;
      line-height: 1.5;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
}
</style>